<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.min.js"></script>
</head>

<body>
    <img src="../html/pic/doge.jpg" alt="" id="img1" width="320px">
    <br>&nbsp;&nbsp;
    <input type="button" value="按一下放大" id="button1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="按一下缩小" id="button2">
    <script>
        function Extract(a) {

        }
        $(document).ready(function () {
            $("#button1").click(function () {
                let width = $("#img1").attr("width");
                let widthNum = width.match(/\d+\.?\d*/)[0];
                // 转换为数字类型（可选，根据需求）
                widthNum = Number(widthNum);
                widthNum += 100;
                $("#img1").attr("width", widthNum + "px")
            })
            $("#button2").click(function () {
                let width = $("#img1").attr("width");
                let widthNum = width.match(/\d+\.?\d*/)[0];
                // 转换为数字类型（可选，根据需求）
                widthNum = Number(widthNum);
                widthNum -= 100;
                if (widthNum < 0) alert("太小了")
                else {
                    $("#img1").attr("width", widthNum + "px");
                }

            })
        })
    </script>

</body>

</html>